<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
          width: 200px;
          height: 200px;
         background-color: tomato;
         margin: 100px auto;
        }
    </style>
</head>
<body>
      <button>aaaa</button>
      <button>bbbbb</button>
     
      <div class='one'>11111111</div>

      <div class='two'>22222222222</div>
    
</body>
</html>
<script>

let divObjList = document.getElementsByTagName('div');

function  test(){

    alert('我是预先被定义的处理函数');
}


function changeColor(){
    divObjList[0].style.color='blue';
    divObjList[1].style.color='blue';
}

function changeBig(){

    divObjList[0].style.fontSize='40px';
    divObjList[1].style.fontSize='40px';
}

//使用匿名函数的方式
// divObjList[0].onclick=function(){
//        alert('啊，我被点击了');
// }

// divObjList[1].onclick=function(){
//        alert('啊，我被点击了');
// }

//使用预先定义好的 
//注意一下  ：在使用预定好的函数时，不要加上括号。
// 加上括号后就变成了调用函数并把返回值赋值事件属性
// divObjList[0].onclick = test;
// divObjList[1].onclick=test;

// divObjList[0].onclick =changeColor; 

// divObjList[0].onclick =changeBig; 

// divObjList[0].onclick=()=>{
//     changeColor();
//     changeBig();
// }


// document.getElementsByTagName('button')[0].onclick=()=>{
//      changeBig();
//      changeColor();
// }


//  document.getElementsByTagName('button')[1].onclick=()=>{
//    // document.getElementsByTagName('button')[0].onclick=null;
//  }

//----已现代的方法来绑定处理函数----------------------
/*
addEventListener(三个参数)  //添加事件
 1 事件的类型   点击事件 双击  鼠标事件
 2 事件梳理程序  （绑定函数）
 3  事件流的类型  默认是false: 冒泡流 true : 捕获流
*/

document.getElementsByTagName('button')[0].addEventListener('click', changeBig);
document.getElementsByTagName('button')[0].addEventListener('click', changeColor);

//删除事件
/*
removeEventListener(两个参数)  //添加事件
 1 事件的类型   点击事件 双击  鼠标事件
 2 事件梳理程序  （绑定函数）
*/
document.getElementsByTagName('button')[1].removeEventListener('')




</script>
